<style scoped="scoped">
  .print-container {
    margin-left: 55px;
  }
</style>
<template>
  <el-dialog
  title="客户服务单打印"
  width="900px"
  :visible.sync="showModal"
>
  <div class="print-container" v-for="(item, index) in detailArr" :key="index" v-show="index === 0">
    <div class="print-header" style="width: 750px;height: 80px;">
      <div class="print-header-logo" style="width: 140px;float: left;text-align: center">
        <img :src="'/api/ms-mongodb/file/download?fileId=' + item.companyLogo" alt="logo异常"
             style="width: 120px;margin-top: 10px;height: 70px"
        >
      </div>
      <div style="width: 610px;height: 80px;float: left;text-align: center">
        <h2 style="margin: 0;line-height: 70px;padding-right: 130px">{{item.companyName}}</h2>
        <span style="float: right;margin-right: 10px;margin-top: -10px;font-size: 18px">{{item.orderNo}}</span>
      </div>
    </div>
    <div class="print-content" style="width: 750px">
      <!--共10列单列宽度75px-->
      <table width="100%" style="width: 100%;border-collapse:collapse;font-weight: 600;">
        <tr>
          <td :style="tableOne1">下单日期</td>
          <td :style="tableOne2" colspan="4">{{item.foundtime | unixTimestampFilter('YYYY-MM-DD')}}</td>
          <td :style="tableOne1">下单人</td>
          <td :style="tableOne2 + 'text-align:left'" colspan="3">
            {{item.founderUserName}}
            <!--<p v-for="(p, pIndex) in item.appoindList" :key="pIndex"-->
               <!--style="margin: 0px 0px 0px 5px;line-height: 25px;width: 260px">-->
              <!--{{p.serviceType}}：{{p.startTime | unixTimestampFilter('YYYY-MM-DD')}}({{p.timeInterval}})-->
            <!--</p>-->
          </td>
        </tr>
        <!--<tr>-->
          <!--<td :style="tableOne1">下单人</td>-->
          <!--<td :style="tableOne2" colspan="4">{{item.founderUserName}}</td>-->
          <!--<td :style="tableOne1">派工单号</td>-->
          <!--<td :style="tableOne2" colspan="3">{{item.outNo}}</td>-->
        <!--</tr>-->
        <tr>
          <td :style="tableOne1" rowspan="2">商家信息</td>
          <td :style="tableOne1">商家名称</td>
          <td :style="tableOne2" colspan="3">{{item.cargoOwner}}</td>
          <td :style="tableOne1">商家电话</td>
          <td :style="tableOne2" colspan="4">{{item.cargoOwnerPhone}}</td>
          <!--<td :style="tableOne1">旺旺ID</td>-->
          <!--<td :style="tableOne2" colspan="2"><div style="width: 75px"></div></td>-->
        </tr>
        <tr>
          <td :style="tableOne1">提货地址</td>
          <td :style="tableOne2" colspan="4" style="word-break: break-all;">{{item.pickUpProvince}} {{item.pickUpCity}} {{item.pickUpDistrict}} {{item.pickUpAddress}}</td>
          <td :style="tableOne1">提货电话</td>
          <td :style="tableOne2" colspan="3">{{item.pickUpPhone}}</td>
        </tr>
        <tr>
          <td :style="tableOne1" rowspan="3">用户信息</td>
          <td :style="tableOne1">用户姓名</td>
          <td :style="tableOne2" colspan="3">{{item.consigneName}}</td>
          <td :style="tableOne1">用户电话</td>
          <td :style="tableOne2" colspan="4">{{item.consignePhone}}</td>
          <!--<td :style="tableOne1">旺旺ID</td>-->
          <!--<td :style="tableOne2" colspan="2"></td>-->
        </tr>
        <tr>
          <td :style="tableOne1">用户地址</td>
          <td :style="tableOne2" colspan="8" style="word-break: break-all;">{{item.consigneProvince}} {{item.consigneCity}} {{item.consigneDistrict}} {{item.consigneAddress}}</td>
        </tr>
        <tr>
          <td :style="tableOne1">订单备注</td>
          <td :style="tableOne2" colspan="8" style="word-break: break-all;">{{item.orderMemo}}</td>
        </tr>
      </table>
      <div
        style="width: 100%;height: 35px;text-align: center;line-height: 35px;border-left: 1px solid #666;border-right:  1px solid #999;box-sizing: border-box">
        <span style="font-size: 18px;font-weight: 600">配送产品明细</span>
      </div>
      <table width="100%" style="width: 100%;border-collapse:collapse;font-weight: 600">
        <tr>
          <th width="53px" :style="tableTwo1">序号</th>
          <th width="210px" :style="tableTwo1">产品名称</th>
          <th width="55px" :style="tableTwo1">数量</th>
          <th width="55px" :style="tableTwo1">单位</th>
          <th width="65px" :style="tableTwo1">包件数</th>
          <th width="85px" :style="tableTwo1">体积(m³)</th>
          <th width="231px" :style="tableTwo1" colspan="3">备注</th>
        </tr>
        <tr v-for="(p, pIndex) in item.productList" :key="pIndex">
          <td :style="tableTwo1">{{pIndex + 1}}</td>
          <td :style="tableTwo1">{{p.productName}}</td>
          <td :style="tableTwo1">{{p.productNum}}</td>
          <td :style="tableTwo1">{{p.productUnit}}</td>
          <td :style="tableTwo1">{{p.packageNum}}</td>
          <td :style="tableTwo1" v-if="p.totalValue">{{p.totalValue}}</td>
          <td :style="tableTwo1" v-else></td>
          <td :style="tableTwo1" colspan="3">{{p.productMemo}}</td>
        </tr>
        <tr>
          <td :style="tableTwo1" colspan="8">
            <span style="margin: 0px 30px">产品总数：{{item._totalProductNum}}</span>
            <span style="margin: 0px 30px">总包件：{{item._totalPackageNum}} 件</span>
            <span style="margin: 0px 30px">总体积：{{item._totalValue | decimalNumFilter}} m³</span>
          </td>
          <!--<td :style="tableTwo1">2</td>-->
          <!--<td :style="tableTwo1">{{item._totalProductNum}}</td>-->
          <!--<td :style="tableTwo1"></td>-->
          <!--<td :style="tableTwo1">{{item._totalPackageNum}}</td>-->
          <!--<td :style="tableTwo1">{{item._totalValue | decimalNumFilter}}</td>-->
          <!--<td :style="tableTwo1" colspan="3"></td>-->
        </tr>
        <!--<tr>-->
          <!--<td :style="tableTwo1">其他</td>-->
          <!--<td :style="tableTwo1"></td>-->
          <!--<td :style="tableTwo1"></td>-->
          <!--<td :style="tableTwo1"></td>-->
          <!--<td :style="tableTwo1"></td>-->
          <!--<td :style="tableTwo1"></td>-->
          <!--<td width="75px" :style="tableTwo1">库管签字</td>-->
          <!--<td :style="tableTwo1" colspan="2"><div style="width: 120px"></div></td>-->
        <!--</tr>-->
      </table>
      <table width="100%" style="font-size: 14px;line-height: 25px">
        <tr>
          <td colspan="4">
            <u style="font-size: 12px;line-height: 25px;">亲爱的用户：很荣幸能为你服务，请您对我公司服务人员工作给予评价，以促进我们为用户提供更优质的服务，衷心感谢您的支持与配合！</u>
          </td>
        </tr>
        <tr v-for="p in item.distributionList" :key="p.dispatchId">
          <td>配送车辆：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{p.plateNumber}}</span></td>
          <td>配送司机：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{p.workerName}}</span></td>
          <td>司机电话：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{p.workerPhone}}</span></td>
          <td>服务：{{p.serviceType}}</td>
        </tr>
        <!--新改的服务信息：-->
        <tr v-for="x in item.serviceList" :key="x.dispatchId">
          <td>服务类型：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{x.serviceType}}</span></td>
          <td>预约时间：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{x.appointTime}} {{x.timeInterval}}</span></td>
        </tr>
        <tr v-for="x in item.serviceList" :key="x.dispatchId">
          <td>服务方：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{x.workerName}}</span></td>
          <td>服务电话：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{x.workerPhone}}</span></td>
          <td>配送车辆：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{x.plateNumber}}</span></td>
        </tr>
        <tr v-for="(p, n) in item.installList" :key="n">
          <td>安装师傅：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{p.workerName}}</span></td>
          <td colspan="2">师傅电话：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px">{{p.workerPhone}}</span></td>
          <!--<td></td>-->
          <td>服务：{{p.serviceType}}</td>
        </tr>
        <!--<tr v-if="!item.distributionList.length">-->
          <!--<td>配送车辆：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px"></span></td>-->
          <!--<td>配送司机：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px"></span></td>-->
          <!--<td>司机电话：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px"></span></td>-->
          <!--<td>服务：</td>-->
        <!--</tr>-->
        <!--<tr v-if="!item.installList.length">-->
          <!--<td>安装师傅：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px"></span></td>-->
          <!--<td colspan="2">师傅电话：<span style="display: inline-block;border-bottom: 1px solid #666;line-height: 20px;min-width: 80px"></span></td>-->
          <!--&lt;!&ndash;<td></td>&ndash;&gt;-->
          <!--<td>服务：</td>-->
        <!--</tr>-->
      </table>
      <div class="print-footer">
        <!--<div class="print-footer-left"-->
        <!--style="width: 365px;float: left">-->
        <!--<p style="margin: 0;text-align: center;font-size: 12px">-->
        <!--一、上门服务与货品验收，请在对应项打√（用户填写）-->
        <!--</p>-->
        <!--<table width="100%" style="width: 100%;border-collapse:collapse;font-weight: 600;line-height: 25px;font-size: 14px">-->
        <!--<tr>-->
        <!--<td width="50px" :style="tableTwo1">序号</td>-->
        <!--<td width="215px" :style="tableTwo1">项目</td>-->
        <!--<td width="50px" :style="tableTwo1">是</td>-->
        <!--<td width="50px" :style="tableTwo1">否</td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td :style="tableTwo1">1</td>-->
        <!--<td :style="tableTwo1">是否与您提前预约上门时间</td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td :style="tableTwo1">2</td>-->
        <!--<td :style="tableTwo1">进门时是否佩戴脚套</td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td :style="tableTwo1">3</td>-->
        <!--<td :style="tableTwo1">服务技师状态是否令您满意</td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td :style="tableTwo1">4</td>-->
        <!--<td :style="tableTwo1">货品包装是否完好</td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--</tr>-->
        <!--<tr>-->
        <!--<td :style="tableTwo1">5</td>-->
        <!--<td :style="tableTwo1">安装调试/维修是否到位</td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--<td :style="tableTwo1"></td>-->
        <!--</tr>-->
        <!--</table>-->
        <!--<div style="width: 100%;text-align: center">-->
        <!--<h3 style="margin: 10px 0px">用心服务，感动客户！</h3>-->
        <!--<span>维修、保养热线：{{item.serviceHotline}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <div class="print-footer-right">
          <p style="margin: 10px 0 0 0 ;font-size: 12px"><span style="color: #333">签收确认（用户填写）</span> 温馨提示：请认真确认货品,有无异常请明确备注清楚，谢谢您的合作！</p>
          <div style="width: 100%;height: 170px;border: 1px dashed #666;border-radius: 20px">
            <p style="float: right;margin: 135px 10px 0px 20px;font-size: 20px">客户验收签字：<u><span style="color: #fff">占位占位占位</span></u></p>
          </div>
        </div>
        <div class="clearfix"></div>
        <div style="width: 100%;">
          <h3 style="margin: 10px 0px;float: left">用心服务，感动客户！</h3>
          <span style="float: right;font-size: 18px;line-height: 38px">公司服务热线：{{item.serviceHotline}}</span>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="print()">打 印</el-button>
      </span>
</el-dialog>
</template>

<script>
import {getLodop, validateLODOP, copy} from '@/utils'
import {getLoginUser} from '@/utils/ajax'
import {unixTimestampFilter, filterDataBaseDictionary, decimalNumFilter} from '@/filters'
let LODOP = null
export default {
  name: 'PrintModal',
  props: {
    idArr: {
      type: Array,
      required: true
    }
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary,
    decimalNumFilter
  },
  data() {
    return {
      showModal: false,
      user: getLoginUser('name'),
      detailArr: [],
      tableOne1: 'text-align: left;border: 1px solid #666;padding: 1px 4px;width:75px',
      tableOne2: 'text-align: left;border: 1px solid #666;padding: 1px 4px;',
      tableTwo1: 'text-align: center;border: 1px solid #666;padding: 1px 2px;'
    }
  },
  created() {
    getLodop().then(result => {
      LODOP = result
    })
  },
  mounted() {},
  methods: {
    getDetail() {
      this.$ajax.post('/ms-terminal-order/service-order-controller/get-service-card', this.idArr).then(response => {
        let arr = copy(response.data || [], true)
        arr.forEach((item, index) => {
          item._totalProductNum = 0 // 产品总数量
          item._totalPackageNum = 0 // 产品总包件数
          item._totalValue = 0 // 产品总体积
          item.productList.forEach(v => {
            item._totalProductNum += v.productNum
            item._totalPackageNum += v.packageNum
            item._totalValue += v.totalValue
          })
          let addArr = []
          if (item.productList.length < 10) {
            for (let i = 0; i < (10 - item.productList.length); i++) { // 产品信息默认10条
              addArr.push({})
            }
          }
          item.productList = item.productList.concat(addArr)
        })
        this.detailArr = arr
      })
    },
    show() {
      this.showModal = true
      this.$nextTick(_ => {
        this.getDetail()
      })
    },
    hide() {
      this.showModal = false
    },
    print() {
      if (validateLODOP(LODOP)) {
        $(this.$el).find('.print-container').each((index, v) => {
          // LODOP.SET_PRINT_PAGESIZE(1, 2180, 1400, 'A4')
          LODOP.ADD_PRINT_HTM('0.5mm', '2mm', '218mm', '290mm', v.innerHTML)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          LODOP.NewPage()
        })
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '600px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        this.hide()
        LODOP.PREVIEW()
        // this.labelRecord()
      }
    },
    labelRecord() {
      this.$ajax.post('/ms-warehouse-order/user-pick-up/get-user-pick-up-print', this.idArr).then(response => {
        this.$emit('refresh')
      })
    }
  }
}
</script>
